import React, { Component } from "react";

class Child extends Component {
  state = {
    count: 10,
    prevCount: 10,
  };

  // 根据一个props的值，始终得到一个跟props相同的值的一个state
  // 可以有一个state，state的值可以跟着props的某一个的改变而改变
  // 必须要有static，还必须要有state
  // 必须要return一个对象或者null
  static getDerivedStateFromProps(props, state) {
    console.log("getDerivedStateFromProps");
    // return null;
    // return {
    //   count: props.num,
    // };

    // props.num: 20    state.prevCount: 10  ->   count: 20   prevCount: 20
    // props.num: 40    state.prevCount: 20  ->   count: 40   prevCount: 40
    // props.num: 40    state.prevCount: 40  ->   null
    if (props.num === state.prevCount) {
      return null;
    } else {
      return {
        count: props.num,
        prevCount: props.num,
      };
    }
  }

  fn = () => {
    this.setState({
      count: 80,
    });
  };

  render() {
    return (
      <div>
        child子组件 - {this.state.count} -{" "}
        <button onClick={this.fn}>btn</button>
      </div>
    );
  }

  // 在更新之前得到一个快照(一条记录)
  // 需要return一个值或者null，作为快照
  // 是在render函数调用和dom重新更新中间执行的
  getSnapshotBeforeUpdate(prevProps, prevState) {
    console.log("getSnapshotBeforeUpdate");
    // 因为getSnapshotBeforeUpdate能得到的数据在componentDidUpdate也能得到
    // 只有dom元素会发生改变
    // 只能return跟css有关的样式传递给componentDidUpdate
    return 123;
  }

  componentDidUpdate(prevProps, prevState, snapshot) {
    console.log("componentDidUpdate", snapshot);
  }
}

export default Child;
